<template>
  <div ref="chart" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'RadarChart',
  props: {
    legendData: {
      type: Array,
      required: true
    },
    radarIndicator: {
      type: Array,
      required: true
    },
    seriesData: {
      type: Array,
      required: true
    }
  },
  watch: {
    legendData: 'initChart',
    radarIndicator: 'initChart',
    seriesData: 'initChart'
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: this.legendData
        },
        radar: {
          indicator: this.radarIndicator
        },
        series: [
          {
            name: '评分',
            type: 'radar',
            data: this.seriesData
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
/* 这里可以添加一些样式 */
</style>
